<template>
  <div class="flex justify-center" @click.stop>
    <el-switch
      v-model="isDark"
      inline-prompt
      :active-icon="IconEpMoon"
      :inactive-icon="IconEpSunny"
      active-color="var(--el-fill-color-dark)"
      inactive-color="var(--el-color-primary)"
      @change="toggleDark"
    />
  </div>
</template>

<script setup lang="ts">
import IconEpSunny from "~icons/ep/sunny";
import IconEpMoon from "~icons/ep/moon";

// 全局 暗夜模式
const isDark = useDark();
const toggleDark = () => useToggle(isDark);
</script>
